<template>
<div style="position:relative">
  <div class="container animated" :class="{'fadeInLeft':isShowcont=='1','zhfadeOutLeft':isShowcont=='2','fadeInRight':isShowconts=='4','zhfadeOutRight':isShowconts=='5'}">
    <div class="inner-container">
      <div v-if="!hideHead" class="header">
        <slot name="title">
          <div class="flex-between" style="height: 100%">
            <div class="left flex-row leftTitle">
              <!-- <img src="../../assets/newimg/titleIcon.png" width="20" height="20"> -->
              <span class="titleName" :title="title">{{ title }}</span>
            </div>
            <slot name="right" />
          </div>
        </slot>
      </div>
      <div class="body" :class="{ noHead: hideHead }">
        <div class="table-body" :class="{ full: full }">
          <slot>
            <slot name="body" />
          </slot>
        </div>
      </div>
    </div>
	  <!-- <div v-if="panelStretch=='lefts'" class="frametixing" @click="frameleftclick">
        <img v-show="isShowcont!='2'" class="sjx" src="../../assets/map/legend/收起三角.png" alt="">
        <img v-show="isShowcont==2" class="sjx" src="../../assets/map/legend/展开三角.png" alt="">
      </div> -->
	  <!-- <div v-if="panelStretch=='rights'" class="frametixing frametiright" @click="framerightclick">
		<img v-show="isShowconts!='5'" class="sjx" src="../../assets/img/leftbtn.png" alt="">
        <img v-show="isShowconts=='5'" class="sjx" src="../../assets/img/rightbtn.png" alt="">
      </div> -->
	  <div  v-if="panelStretch=='lefts'" class="closeOrOPenBtn"  @click="frameleftclick" >
		<img v-show="isShowcont!='2'" class="item" src="../../assets/newimg/close_btn.png" alt="">
        <img v-show="isShowcont=='2' && menuName=='yuyan'" class="itemopen" src="../../assets/newimg/yyopen_button.png" alt="">
        <img v-show="isShowcont=='2' && menuName=='yuan'" class="itemopen" src="../../assets/yuanimg/openBtn.png" alt="">
		 <img v-show="isShowcont=='2' && menuName=='yubao'" class="itemopen" src="../../assets/imgNew/yubao1_2.png" alt="">
        <img v-show="isShowcont=='2' && menuName=='yujing'" class="itemopen" src="../../assets/imgNew/yujing1.png" alt="">
	  </div>
	  <div v-if="panelStretch=='rights'" class="closeOrOPenBtn closeOrOPenBtnRight" @click="framerightclick">
		<img v-show="isShowconts!='5'" class="item" src="../../assets/newimg/rightclosebtn.png" alt="">
        <img v-show="isShowconts=='5'" class="itemopen" src="../../assets/newimg/rightopenbtn.png" alt="">
      </div>
  </div>
  
  
</div>
</template>
<script>
export default {
    name: 'Frame',
    props: {
        // 名称
        title: {
            type: String,
            default: ''
        },
        icon: {
            type: String,
            default: ''
        },
        hideHead: {
            type: Boolean,
            default: false
        },
        // body 无padding
        full: {
            type: Boolean,
            default: false
		},
		panelStretch:{
		    type: String,
            default: 'lefts'
		},
		menuName:{
		    type: String,
		},
	},
    data() {
        return {
			isShowcont:3,
			isShowconts:'6',
			
		}
	},
	 computed: {
       
        rightFold() {
            return this.$store.getters.rightFold
        },
    },
    watch: {
        // rightFold 右边是否展开
        rightFold: {
            immediate: true,
            handler: function(val, oldVal) {
				if(this.panelStretch == 'rights'){
					if(this.isShowconts == '6'){
					}else{
						if(this.isShowconts=='5'){
							this.isShowconts = val ? '5' : '4'
						}
					};
				};
                
            },
        },
       
    },
	 created() {
		 if(this.panelStretch=='lefts'){
			  this.$store.dispatch('leftFold', true)
		 };
		 console.log('menuName',this.menuName);
		 
		 
    },
	methods:{
		frameleftclick(){
			 if(this.isShowcont=='2'){
			   this.isShowcont='1';
			   this.$store.dispatch('leftFold', true)
				let cnDiv = document.getElementsByClassName('cesium-widget-cesiumNavigationContainer')
				if (cnDiv) {
					cnDiv[0].style.left = '21%'
				}
			 }else{
				 this.isShowcont='2';
				  setTimeout(()=>{
					this.$store.dispatch('leftFold', false);
					let cnDiv = document.getElementsByClassName('cesium-widget-cesiumNavigationContainer')
					if (cnDiv) {
						cnDiv[0].style.left = '2%'
					 }
			     },500);
			 }
		},
		framerightclick(){
			 if(this.isShowconts=='5'){
			   this.isShowconts='4';
                this.$store.dispatch('rightFold', false)
			 }else{
				this.isShowconts='5';
				setTimeout(()=>{
                  this.$store.dispatch('rightFold', true)
			   },500);
				
			 }
		}
	},
	 beforeDestroy() {
		 if(this.panelStretch=='lefts'&&this.isShowcont!='3'){
			
			let cnDiv = document.getElementsByClassName('cesium-widget-cesiumNavigationContainer')
			if (cnDiv) {
				cnDiv[0].style.left = '21%'
			}
		 };
        
       
    },
}
</script>
<style lang="scss" scoped>
.titleName{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	font-size: 18px;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #FFFFFF;
}
	.header {
		position: relative;
	}

	.header .btnCjfa {
		height: 30px;
		line-height: 25px;
		position: absolute;
		right: 0;
		top: 20px;

	}

	.container {
		height: 100%;
		position: relative;
		z-index: 2;
		pointer-events: auto;
		// background: url(../../assets/newimg/leftCurBox.png) no-repeat;
		background: url(../../assets/imgNew/leftCurBox.png) no-repeat;
        background-size: 100% 100%;
		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.leftTitle {
			height: 100%;
			width: 100%;
			font-size: 18px;
			color:#fff;
			background: url(../../assets/imgNew/lefttit.png) no-repeat;
			background-size: 100% 110%;
			background-position:0px;
			padding-left:36px;
			// text-shadow: 2px 3px 1px  rgba(0,0,0,0.5);
			span{
				line-height:100%;

			}
		}

		.inner-container {
			width: 100%;
			height: 100%;
			position: relative;

			.header {
				height: 40px;
				width: 100%;
				font-size: 24px;
				line-height: 60px;
				font-family: 'MSTIFFHEIPRC';
				// background: url(../../assets/newimg/left_top_name.png) no-repeat;
				text-align: left;
				color: #fff;
				// padding-left: 10px;
				text-indent: 10px;
				// padding-top: 10px;
                box-sizing: border-box;

				// 更多图标
				.more-icon {
					width: 20px;
					height: 5px;
					cursor: pointer;
				}
			}

			.body {
				height: calc(100% - 50px);
				width: 100%;
				&.noHead {
					height: 100%;
				}

				.table-body {
					padding: 5px 10px;
					height: 100%;
					overflow: hidden;
					box-sizing: border-box;
				}

				.full {
					padding: 0;
				}
			}
		}
	}
	  .frametixing {
		position: absolute;
		width: 93px;
		//height: 15px;
		height: 20px;
		right: -53px;
		top:50%;
		margin-top:-10px;
		transform: rotate(90deg);
		background-image: url("../../assets/map/legend/三角背景.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		z-index: 20;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;

		.sjx {
			position: relative;
			width: 17px;
			height: 8px;
		}
		}
	  .closeOrOPenBtn {
		position: absolute;
		right: 26px;
		top:10px;
		margin-top:-10px;
		//transform: rotate(90deg);
		z-index: 20;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;

		.item {
			position: relative;
			top: 8px;
		}
		.itemopen {
			position: relative;
			right: -62px;
			//top: -7px;
			top: 0;
		}
		}
	  .closeOrOPenBtnRight {
		position: absolute;
		right: 26px;
		top:10px;
		margin-top:-10px;
		//transform: rotate(90deg);
		z-index: 20;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;

		.item {
			position: relative;
			//transform: rotate(180deg);
			top: 8px;
		}
		.itemopen {
			position: relative;
			right: 346px;
			//top: -7px;
			top: 0;
		}
		}
		.frametiright{
			background-image: none;
		//    left:-52px;
		//    transform: rotate(-90deg);
		width:20px;
		height:93px;
		left: -17px;
	    margin-top:-48px;
		.sjx {
			position: relative;
			width: 20px;
			height: 93px;
			transform: rotate(-90deg);
		}
		
		}
		@keyframes fadeOutLefts {
			0% {
				opacity: 1
			}

			to {
				opacity: 1;
				-webkit-transform: translate3d(-101%,0,0);
				transform: translate3d(-101%,0,0);
			}
		}
		.zhfadeOutLeft {
			-webkit-animation-name: fadeOutLefts;
			animation-name: fadeOutLefts
		}
		@keyframes fadeOutrights {
			0% {
				opacity: 1
			}

			to {
				opacity: 1;
				-webkit-transform: translate3d(102%,0,0);
				transform: translate3d(102%,0,0);
			}
		}
		.zhfadeOutRight{
			-webkit-animation-name: fadeOutrights;
			animation-name: fadeOutrights
		}
		
</style>
